@charset "utf-8";

@import "common";
@import "reset";



.web{
    height: 100%;
    overflow:scroll; 

    header{
        .nav{
            margin: vw(50px) vw(25px) vw(20px) vw(25px);
            width: vw(705px);
            height: vw(60px);
            display: flex;
            justify-content: space-between;
            .back{
                display: inline-block;
                width: vw(125px);
                height: vw(60px);
                border-radius: vw(30px);
                
                box-sizing: border-box;
                border: 1px solid $index_color;
                text-align: center;
                span{
                    font-size: vw(30px);
                }
              
            }
            span{
                line-height: vw(60px);
            }
            .city_box{
                position: relative;
                width: vw(164px);
                height: vw(60px);
                border: 2px solid $index_color;
                box-sizing: border-box;
                padding-left:vw(14px) ;
                select{
                    width: 100%;
                    height: 100%;
                    border: none;
                    appearance: none;
                    -webkit-appearance: none;
                    // 兼容性问题 去掉标签自带样式
                }
                &::after{
                    content: "";
                    // 伪对象属性一定要右content
                    position: absolute;
                    top: 10px;
                    left: 50px;
                    width:0;
                    height:0;
                    border-width:8px 8px 8px 8px;
                    border-style:solid;
                    border-color:$index_color transparent transparent ;
                   
                }
        
            }
        }




    }


    .image_box{
        display: flex;
        justify-content: space-around;
        margin-top: vw(20px);
        img{
            width: vw(150px);
            height: vw(150px);
        }
    }
    .text{
        display: flex;
        justify-content: space-around;
        span{
            
        }
    }
    .more{
        position: relative;
        .right{
          padding-top: vw(20px);
          padding-left: vw(20px);
          i{
            padding-left: vw(10px);
            font-size: vw(30px);
              color: $index_color;
          }
          span{
              
              font-size:vw(30px) ;
              vertical-align: super;
          }
        }
        display: flex;
        justify-content: space-between;
        .left{
            padding-top: vw(50px);
            display: inline-block;
            span{
                font-size: vw(24px);
                vertical-align: super;
                line-height: vw(24px);
            }
        .box{
            margin-bottom:vw(30px) ;
          //   margin-top: vw(50px);
          margin-right:vw(22px) ;
            display: inline-block;
            width: vw(28px);
            height: vw(28px);
            border-radius: vw(25px);
            box-sizing: border-box;
            border: 1px solid $index_color;
            i{
              font-size: vw(25px);
              vertical-align: super;
              color: $index_color;
             
          }
        }
      }

    }
    .food{
        margin-bottom:vw(40px) ;
        display: flex;
        justify-content: space-around;
        img{
            width: vw(135px);
            height:vw(135px) ;
        }
    }
    
    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #bbb9ba;
        width: 100%;
        background-color: #fff;
        height: vw(120px);
        .left_right{
            margin-left: vw(50px);
            margin-right:vw(50px) ;
        ul {
          
    
            padding: r(15px) 0 r(12px);
            li {
    
                width: 25%;
                text-align: center;
                position: relative;
                a {
                    color: #8b8b8b;
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    i {
                        font-size: r(38px);
                        color: $index_color;
                    }
                    p {
                        font-size: r(18px);
                    }
                    &.active {
                        color: $index_color;
                    }
                }
            }
        }
    
    }
}





}